<template>
  <!--面包屑-->
<div style="margin-bottom: 30px">
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
        <router-link to="/ContractHshow">货主合同管理</router-link>
    </el-breadcrumb-item>
    <el-breadcrumb-item>货主信息新增</el-breadcrumb-item>
  </el-breadcrumb>
</div>
    <div>
        <h2>货主合同添加</h2>
        <br />
        <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="form"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
        <table>
            <tr>
                <td>
                    <el-form-item label="合同标题：" style="font-size: 20px; float: right" prop="contractTitle">
                        <el-input v-model="form.contractTitle" style="width: 300px; height: 40px" placeholder="请输入合同标题"
                            clearable />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="货主单位" style="font-size: 20px; float: right" prop="unit">
                        <el-input v-model="form.unit" style="width: 300px; height: 40px" placeholder="请输入货主单位"
                            clearable />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="货主负责人：" style="font-size: 20px; float: right" prop="personCharge">
                        <el-input v-model="form.personCharge" style="width: 300px; height: 40px" placeholder="货主负责人："
                            clearable />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="线路" style="font-size: 20px; float: right" prop="lineName">
                       <el-select v-model="form.lineName" placeholder="线路" style="width: 300px">
                            <el-option v-for="item in line" :label="item" :value="item" />
                        </el-select> 
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="吨运价" style="font-size: 20px; float: right" prop="tonPrice">
                        <el-input v-model="form.tonPrice" style="width: 300px; height: 40px" placeholder="吨运价"
                            clearable />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="包车条件吨位" style="font-size: 20px; float: right" prop="ton">
                        <el-input v-model="form.ton" style="width: 300px; height: 40px" placeholder="请输入包车条件吨位"
                            clearable />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="包车金额：" style="font-size: 20px; float: right">
                        <el-input v-model="form.charteredBusPrice" style="width: 300px; height: 40px"
                            placeholder="请输入包车金额" clearable />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="经办人" style="font-size: 20px; float: right" prop="attn">
                        <el-input v-model="form.attn" style="width: 300px; height: 40px" placeholder="请输入经办人"
                            clearable />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td>
                    <el-form-item label="签订时间" style="font-size: 20px; float: right">
                        <el-date-picker v-model="form.dateofSigning" type="date" value-format="YYYY-MM-DD"
                            placeholder="请选择签订时间" clearable style="width: 300px; height: 40px" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="合同金额" style="font-size: 20px; float: right">
                        <el-input v-model="form.contractAmount" style="width: 300px; height: 40px" placeholder="合同金额"
                            clearable />
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <el-form-item label="合同标的或项目说明" style="font-size: 20px; width: 970px; height: 100px; float: right">
                        <el-input v-model="form.contractNote" type="textarea"
                            style="font-size: 20px; width: 970px; height: 100px"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <el-form-item label="合同主要条款/边更条款"
                        style="font-size: 20px; width: 970px; height: 100px; float: right">
                        <el-input v-model="form.contractTerms" type="textarea"
                            style="font-size: 20px; width: 970px; height: 100px"></el-input>
                    </el-form-item>
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px">合同文本(附件)：</td>
                <td>
                    <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="http://10.223.8.15:8000/hwrite/api/Contract/Upfile"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
    :on-success="handleSuccess"
  >
    <el-button type="primary">选取文件</el-button>
  
  </el-upload>
                    <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span>
                </td>
            </tr>
        </table>
        </el-form>
        <br /><br />
        <tr align="center">
            <el-button type="primary" @click="Approval" style="width: 150px; height: 50px">提交审批</el-button>
            <el-button @click="Cancel" style="width: 150px; height: 50px">取消</el-button>
            <el-button type="primary" @click="onSubmit" style="width: 150px; height: 50px">保存草稿</el-button>
        </tr>
    </div>
</template>
<script setup lang='ts'>
import axios from "axios";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import type { UploadProps, UploadUserFile } from 'element-plus'
onMounted(() => {
    getLine();
});
const router = useRouter();
const form = reactive({
    contractTitle: "", //合同标题
    unit: "", //单位
    personCharge: "", //负责人
    lineId: 1, //线路
    lineName: "", //线路名称
    tonPrice: "", //吨价
    ton: "", //吨数
    charteredBusPrice: "", //包车金额
    attn: "", //经办人
    dateofSigning: "", //签订日期
    contractAmount: "", //合同金额
    contractNote: "", //合同标的或项目说明
    contractTerms: "", //合同主要条款/变更条款
    contractText: "", //合同文本
    contractNumber: "", //合同编号
    ccontractStatus: 0, //合同状态
    contractClassification: 1, //合同分类
    createdBy:'张三',//创建人
});
//线路
const line = ref([]);
const getLine = () => {
    axios.get("/hread/api/ContractRead/Getlines").then((res) => {
        alert(1);
      console.log(res.data.data);
        line.value = res.data.data.list.map((o) => o.lineName);
    });
};
//上传文件
const handleSuccess=(any:any)=>{
console.log(any);
form.contractText=any;
}
//保存草稿
const onSubmit = () => {
    //日期年月日
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var nowDate = "CY123" + year + "-" + month + "-" + day;
    form.contractNumber = nowDate;

    form.ccontractStatus = 1;
    console.log(form);
    axios
        .post("/hwrite/api/Contract/AddContract", form)
        .then((res) => {
            if (res.data.data > 0) {
                ElMessage({
                    message: "保存成功",
                    type: "success",
                });
                router.push("/ContractHshow");
            } else {
                ElMessage.error("提交失败");
            }
        });
};
//取消
const Cancel = () => {
    router.push("/ContractHshow");
};
//提交审批
const Approval = () => {
    //日期年月日
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var nowDate = "CY123" + year + "" + month + "" + day;
    form.contractNumber = nowDate;
    console.log(nowDate);
    form.ccontractStatus = 2;
    axios
        .post("/hwrite/api/Contract/AddContract", form)
        .then((res) => {
            if (res.data.data > 0) {
                ElMessage({
                    message: "提交成功",
                    type: "success",
                });
                router.push("/ContractHshow");
            } else {
                ElMessage.error("提交失败");
            }
        });
};
//合同添加图片
const fileList = ref<UploadUserFile[]>([])
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
   
console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile)
 
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
   
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  
  return ElMessageBox.confirm(
    `确定删除吗 ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
const rules = reactive<FormRules>({
    contractTitle: [
    { required: true, message: '合同标题不能为空', trigger: 'blur' },
  
  ],
  unit: [
    { required: true, message: '货主不能为空', trigger: 'blur' },
  
  ],
  personCharge: [
    { required: true, message: '货主负责人不能为空', trigger: 'blur' },
  
  ],
  lineName: [
    { required: true, message: '线路不能为空', trigger: 'blur' },
  
  ],
  tonPrice: [
    { required: true, message: '吨运价不能为空', trigger: 'blur' },
  
  ],
  attn: [
    { required: true, message: '经办人不能为空', trigger: 'blur' },
  
  ],
})
</script>

